.x-rate {
	display: inline-flex;
	cursor: pointer;
	user-select: none;

	&__item {
		position: relative;

		&:not(:last-child) {
			padding-right: $rate-icon-gutter;
		}
	}

	&__icon {
		display: block;
		width: 1em;
		font-size: $rate-icon-size;

		&--half {
			position: absolute;
			top: 0;
			left: 0;
			width: 0.5em;
			overflow: hidden;
		}
	}

	&--disabled {
		cursor: not-allowed;
	}

	&--readonly {
		cursor: default;
	}
}
